<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import TabBar from '@/components/TabBar.vue'

const route = useRoute()

// 根据路由meta确定是否显示TabBar
const showTabBar = computed(() => {
  return route.meta.showTabBar !== false
})
</script>

<template>
  <div class="app-container">
    <router-view v-slot="{ Component }">
      <keep-alive :include="['Home', 'Product', 'Cart', 'Order', 'Mine']">
        <component :is="Component" />
      </keep-alive>
    </router-view>

    <TabBar v-if="showTabBar" />
  </div>
</template>

<style scoped lang="scss">
.app-container {
  min-height: 100vh;
  position: relative;
}
</style>
